<template>
  <div class="monitor_page">
    <!-- table -->
    <el-card class="monitor_page-left" :class="{toggle: isToggleStatus}" shadow="always">
      <div class="filter_header" >
      <el-form ref="form" label-width="100px">
        <div class="monitor_page-filter" v-show="!isToggleStatus">
          <el-form-item label="起止时间：" >
            <el-date-picker
              v-show="!isToggleStatus"
              style="width:100%;min-width:240px"
              size="small"
              value-format="timestamp"
              v-model="timerArray"
              type="datetimerange"
              :picker-options="pickerOptions"
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="monitor_page-filter flex-between filter_select" v-show="!isToggleStatus">
          <el-form-item label="筛选条件：" style="margin-right: 20px">
            <el-select
              v-model.trim="compareTypeModel"
              size="small">
              <el-option
                v-for="item in compareTypes"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="60px" label="数值：" style="margin-right: 20px">
            <el-input type="number" v-model="compareValModel" placeholder="可输入" size="small" style="width: 60%">
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div class="monitor_page-filter flex-between" :class="{setMarginTop: isToggleStatus}">
        <div class="monitor_page-filter-left">
          <button class="toggle_wrap" @click="toggleStatus">
            <i class="el-icon-s-fold" :class="{rotate: isToggleStatus}"></i>
          </button>
          <div v-show="!isToggleStatus">
            <el-button
              size="small"
              @click="confirmDelete"
              icon="el-icon-delete-solid"
              v-if="hasPermission('monitor:record:del')"
              type="danger">删除
            </el-button>
            <el-button
              size="small"
              plain
              v-if="hasPermission('monitor:record:clean')"
              icon="el-icon-s-tools"
              type="primary"
              @click="showMonitorResetDialog('realValue')">设备重置
            </el-button>
            <el-button
              size="small"
              plain
              v-if="hasPermission('monitor:record:clean')"
              icon="el-icon-s-tools"
              type="primary"
              @click="showMonitorResetWaringDialog('relativeValue')">预警值重置
            </el-button>
            <el-button
              size="small"
              plain
              v-if="hasPermission('monitor:record:mark')"
              type="primary"
              @click="showMonitorRemarkDialog">说明
            </el-button>
            <el-button
              size="small"
              plain
              v-if="jiuGanKeJi"
              type="primary"
              @click="lookEquipRecord(timerArray,equipId)">运行日志
            </el-button>
            <el-button
              size="small"
              plain
              v-if="hasPermission('monitor:record:export')"
              @click="$emit('export')"
              icon="el-icon-download"
              type="primary">数据导出
            </el-button>
          </div>
        </div>
        <el-button
          v-show="!isToggleStatus"
          size="small"
          type="primary"
          class="common_btn-defalut"
          icon="el-icon-search"
          @click="form.page=1;$emit('update')">搜索
        </el-button>
      </div>
      </div>
      <!-- table -->
      <el-table
        v-show="!isToggleStatus"
        :data="tableList"
        border
        :height="740"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        tooltip-effect="dark">
        <el-table-column type="selection" width="28">
        </el-table-column>
        <el-table-column prop="createTime" label="数据采集时间" min-width="135">
          <template slot-scope="scope">
            {{scope.row.createTime | formatTimer }}
          </template>
        </el-table-column>
        <el-table-column prop="relativeValue" label="位移值" min-width="60">
        </el-table-column>
        <el-table-column prop="initValue" label="参考基准值" min-width="100">
        </el-table-column>
        <el-table-column prop="speed" label="变化速率(mm/h)" min-width="120">
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-show="!isToggleStatus"
        :disabled="isToggleStatus"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
        :total="form.total">
      </el-pagination>
    </el-card>

    <!-- 绘图部分 -->
    <div class="monitor_page-right">
      <el-card class="card_echarts" shadow="hover">
        <echarts-three-change ref="echartsChange" @showRemarkDailog="showRemarkDialog"></echarts-three-change>
      </el-card>

      <el-card class="card_echarts" shadow="hover">
        <echarts-three-change-rate ref="echartsChangeRate"
                                   @showRemarkDailog="showRemarkDialog"></echarts-three-change-rate>
      </el-card>

    </div>

    <dialog-remark ref="remark" @update="$emit('update')"></dialog-remark>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>
    <monitor-reset ref="monitorReset" @update="$emit('update')"></monitor-reset>
  </div>
</template>

<script>
import EchartsThreeChange from '../monitor-echarts/base/echarts-3-change'
import EchartsThreeChangeRate from '../monitor-echarts/base/echarts-3-change-rate'
import ItemMixins from './item.mixins'

export default {
  mixins: [ItemMixins],
  components: {EchartsThreeChange, EchartsThreeChangeRate},
  props: ['compareTypes', 'compareType', 'compareVal'],
  data() {
    return {
      // 当前的图表钩子
      chartsName: ['echartsChange', 'echartsChangeRate'],
      // 分页参数
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      isShowDialog: false
    }
  },
  computed: {
    compareTypeModel: {
      get() {
        return this.compareType;
      },
      set(value) {
        this.$emit("update:compareType", value);
      },
    },
    compareValModel: {
      get() {
        return this.compareVal;
      },
      set(value) {
        this.$emit("update:compareVal", value);
      },
    },
    //工点类型是否是建筑物，建筑物不展示边坡相关的信息
  },
}
</script>

<style scoped="scoped" lang="less">

  @import url('./commom.less');

  .card_echarts {
    height: 550px;
  }

  .monitor_page-left {
    // 15px未margin
    height: calc(1100px + 15px);
  }

  .el-card {
    background: transparent;
  }
</style>
